<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css">
		<link rel="stylesheet" href="../css/global.css">
		<link rel="stylesheet" href="../css/addressbook.css">
		<script src="../js/flexble.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@2.5/lib/vant.min.js"></script>
		<script type="text/javascript" src="../sdk/webimSDK3.1.2.js"></script>
		<script type="text/javascript" src="../js/WebIMConfig.js"></script>
		<script type="text/javascript" src="../js/webconn.js"></script>
		<script type="text/javascript" src="../js/localstorage.js"></script>
		<script type="text/javascript" src="../utils/msgtype.js"></script>
		<script type="text/javascript" src="../utils/login.js"></script>
		<script type="text/javascript" src="../utils/dialog.js"></script>
	</head>
	<body>
		<div id="bigbox" class="chatPageBox" @click="showrightpop = false">
			<div class="fixedtop">
				<div class="getBack">
					<van-button class="arrowbox" type="default" @click="back">
						<img src="../img/back.png">
					</van-button>
					<van-button class="dingdan" type="default" @click.stop="showrightpop = true">
						<img class="addic" src="../img/addic.png">
					</van-button>
				</div>
				<div v-if="showrightpop" class="rightpopBox">
					<div class="sangle"></div>
					<div class="rightpopInner" @click="creategroup">
						<div class="rightpopInner_img"> 
							<img class="righticon1" src="../img/righticon1.png">
						</div>
						<div class="rightpopInner_text">发起群聊</div>
					</div>
					<div class="rightpopInner" @click="gourl('addfriend.html')">
						<div class="rightpopInner_img">
							<img class="righticon2" src="../img/righticon2.png">
						</div>
						<div class="rightpopInner_text noborderb">添加好友</div>
					</div>
				</div>
			</div>
			<div class="otherbox">
				<van-button class="chatlistbox" type="default" @click="tonewfriendask">
					<div class="chatlistavabox">
						<van-tag v-if="newfriendnum>0" class="noreadbox" round type="danger">{{newfriendnum}}</van-tag>
						<img class="avatar" src="../img/newfris.png">
					</div>
					<div class="chatlist_rightbox">
						<div class="chatlistmidbox">
							<p class="chatname">新的朋友</p>
						</div>
					</div>
				</van-button>
				<van-button class="chatlistbox" type="default" @click="gourl('groupbook.html')">
					<img class="avatar" src="../img/groupi.png">
					<div class="chatlist_rightbox noborbottom">
						<div class="chatlistmidbox">
							<p class="chatname">群组</p>
						</div>
					</div>
				</van-button>	
			</div>
			<div class="friendbox">
				<van-button 
				class="chatlistbox" 
				type="default" 
				@click="gourl('frienddetail.html',item)"
				v-for="(item,index) in friendList"
				:key="index"
				>
					<img class="avatar" src="../img/avatar.jpg">
					<div class="chatlist_rightbox">
						<div class="chatlistmidbox">
							<p class="chatname">{{item.name}}</p>
						</div>
					</div>
				</van-button>	
			</div>
			<div class="footerbox">
				<div class="footinner" @click="gourl('chatlist.html')">
					<van-tag v-if="allnoreadnumshow>0" class="foot_noreadbox" round type="danger">{{allnoreadnumshow}}</van-tag>
					<img class="left_icon1" src="../img/left_icon1.png">
					<p>聊天</p>
				</div>
				<div class="footinner">
					<van-tag v-if="newfriendnum>0" class="foot_noreadbox" round type="danger">{{newfriendnum}}</van-tag>
					<img class="left_icon3" src="../img/left_icon_ac3.png">
					<p class="footcurrent">通讯录</p>
				</div>
				<div class="footinner" @click="gourl('me.html')">
					<img class="left_icon4" src="../img/left_icon4.png">
					<p>我</p>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
var webvue = new Vue({
	el: '#bigbox',
	data() {
		return {
			friendList:[],
			showrightpop:false,
			allnoreadnumshow:0,//新消息提醒
			newfriendnum:0,//新好友申请
		}
	},
	mounted(){
		isfirst = 2;
		relogin();
		this.allnoreadnumshow = getStorage('allnoreadnumshow');
		this.newfriendnum = getStorage('newfriendnum');
	},
	methods:{
		back(){
			window.history.go(-1);
		},
		gourl(url,item){
			saveStorage('pagedata',item)
			window.location.href = url;
		},
		getFriends(){
			var that = this;
			that.friendList = [];
			conn.getRoster({
			  success: function ( roster ) {
				  console.log(roster)
				  roster.forEach((item,index)=>{
					  var obj = {
						  name:item.name,
						  sendID:item.name
					  }
					  that.friendList.push(obj)
				  })
			  },    
			});
		}, 
		tonewfriendask(){
			// console.log(getStorage('allnoreadnumshow'))
			// return
			this.newfriendnum = 0;
			removeStorage('newfriendnum');
			window.location.href = 'newfriendask.html';
		},
		creategroup(){
			window.location.href = 'creategroup.html';
		}
	}
})
</script>